<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局下文本截断竟失效</title>
    <style>
        .container {
            display: flex;
            width: 350px;
            border: 1px dashed #ccc;
            padding: 4px 16px;
            gap: 16px;
        }

        /*
        原因：
            .content-group作为弹性子元素，默认min-width为auto，其最小宽度由内部内容决定。
        浏览器强制容器宽度不小于内容宽度，导致无法压缩，.title失去截断条件。

        机制：
            min-width: auto会锁定容器最小尺寸，阻碍 flex 缩放。
            min-width: 0使容器可缩小至零，释放压缩空间。
            父容器可缩后，子元素获得截断所需的overflow条件，text-overflow正常触发。

        结论：
            当 Flex 布局中出现文本无法截断的情况，应检查目标元素的直接父容器是否设置了min-width: 0。
        该样式是实现弹性截断的前提条件，缺之则省略逻辑无法生效。
        */
        .content-group {
            flex: 1;
            display: flex;
        / align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .title {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 4px;
            background: silver;
            border-radius: 6px;
        }

        .status {
            flex-shrink: 0;
            padding: 4px 16px;
            background: cornflowerblue;;
            color: white;
            border-radius: 6px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content-group">
        <div class="label">Furthering that point,</div>
        <div class="title">the association noted a number of somber research findings,</div>
    </div>
    <div class="status">including</div>
</div>
</body>
</html>
